<template>
    <view class="page">
        <view class="head" :style="{ height: '290rpx', width: selectData.screenWidth + 'px' }">
            <view class="back_box" :style="{ height: selectData.navBarHeight + 'px' }">
                <view class="bg" :style="{ height: '290rpx', width: selectData.screenWidth + 'px', }">
                </view>
                <!-- 状态栏 -->
                <view class="null"
                    :style="{ height: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px' }">
                </view>
                <!-- 返回 -->
                <view class="back"
                    :style="{ top: selectData.statusBarHeight + 'px', width: selectData.screenWidth + 'px', height: selectData.navBarHeightTitle + 'px' }">
                    <image @click="goBack" class="icon" src="https://cdn.oss.bon-top.cn/static_bc/images/back.png"
                        mode="aspectFit">
                    </image>
                    <text class="text ft-32 fw-800 c-33">{{
                        '意见反馈'
                    }}</text>
                    <view :style="{ width: selectData.menuButtonRight + 'px' }" style="color: aqua;height: 100px;">
                    </view>
                </view>

            </view>

        </view>
        <view class="content_box pd-30"
            :style="{ top: selectData.navBarHeight + 'px', width: selectData.screenWidth + 'px' }">
            <view class="bg_title">
                <view class="titles ft-32 c-33 fw-800">Hi、欢迎您的意见反馈~</view>
                <view class="edit_box" :style="{ width: (selectData.screenWidth - 30) + 'px' }">
                    <view class="msg_box  pd-20">
                        <view class="ft-28 c-33 fw-800">意见反馈</view>
                        <view class="textarea_box mt-20">
                            <textarea class="textarea ft-24 c-66"  v-model="form.content" placeholder="请输入反馈内容"
                                placeholder-class="textarea-placeholder" maxlength="500" @input="" />
                            <view class="textarea_bottom ft-24 c-99">0/500</view>
                        </view>
                        <view class="img_model bd-r20 mt-20 pd-20">
                            <text class="ft-24 c-99">添加图({{ form.images.length || 0 }}/9) </text>
                            <view class="imgBox mt-30">
                                <view class="img_list">
                                    <view class="imgItem" v-for="(item, index) in form.images" :key="index">
                                        <image class="imgs  bd-r20" :src="item" @click="openImg(index, form.images)"
                                            mode="aspectFill" />
                                        <image class="icon_samll icons"
                                            src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
                                            mode="aspectFit" @click="deleteImg(index, item)" />
                                    </view>
                                    <view class="imgUpload flex-center" @click="openUploadBtn"
                                        v-if="form.images.length < 9">
                                        <image class="icon_samll deg-90"
                                            src="https://cdn.oss.bon-top.cn/static_bc/images/add_icon1.png"
                                            mode="aspectFit">
                                        </image>
                                    </view>
                                </view>
                            </view>

                        </view>

                    </view>
                    <view class="phone_box flex">
                        <view class="label flex-bwt ft-28 c-33 fw-800">手机号
                            <text
                                style="height: 38rpx;width: 2rpx;display: inline-block;background-color:#F1F1F1 ;"></text>
                        </view>

                        <input v-model="form.phone" placeholder="请输入手机号（选填）" style="font-size: 28rpx;"
                            placeholder-class="input-placeholder" @blur="blur" />
                    </view>
                    <view class="ft-22 ml-10 mt-4" style="color:#FF0000" v-show="!phonemsg">请输入正确手机号</view>

                </view>
            </view>

        </view>
        <view :style="{ height: (98 + 68) + 'rpx' }"></view>
        <view class="btn_box">
            <view class="box" style="height: 98rpx;">

                <view class="btn add" @click="submit()">提交反馈</view>
            </view>

        </view>
    </view>

</template>
<script setup lang="js">
import comHead from '@/components/comHead.vue';
import { onLoad, onReady } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';
import { utils } from '@/utils/utils.js';
import { api } from '@/utils/api.js';

const form = ref({
    content: '',
    phone: '',
    images: []
})
const phonemsg = ref(true)
const blur = () => {
    if (form.value.phone.trim() == '') return phonemsg.value = true
    phonemsg.value = /^1[3-9]\d{9}$/.test(form.value.phone)
    console.log('phonemsg.value', phonemsg.value)

}
const maxLength = ref(9)
const openUploadBtn = async () => {
    // 图片
    const res = await uni.chooseImage({
        sizeType: ['original'], // iOS需保留原图避免压缩异常‌:ml-citation{ref="3" data="citationList"}
        sourceType: ['album', 'camera']
    })

    let list = res.tempFilePaths.slice(0, Number(maxLength.value - form.value.images.length))
    for (let i = 0; i < list.length; i++) {
        console.log(list[i])
        const result = await uploadFilePromise(list[i]);
        form.value.images.push(result)
    }

}
const openImg = (index, imgList = []) => {
    uni.previewImage({
        current: index,
        urls: imgList
    });
}
// 删除图片
const deleteImg = (index, item) => {
    form.value.images = form.value.images.filter((f, i) => i !== index)
}
const submit = () => {
    if (!phonemsg.value) return

    // 注销
    utils.request(api.feedback, { ...form.value }, 'post').then(res => {
        if (res.code == 200) {
            uni.showToast({ title: `反馈成功`, icon: 'none' })
            uni.navigateBack(-1)
        }
    })
}
onLoad(() => {
})

// 返回键
const goBack = () => {
    let pages = getCurrentPages();
    if (pages.length > 1) {
        uni.navigateBack(-1)
    } else {
        wx.reLaunch({
            url: '/pages/index/index',
        })
    }
}
const uploadFilePromise = (url) => {
    uni.showLoading({
        title: '请稍候...'
    })
    return new Promise((resolve, reject) => {
        let a = uni.uploadFile({
            url: utils.domain + '/api/v1/button.uploadImage',
            filePath: url,
            name: 'image',
			fileType: 'image',
            formData: {
                app_id: utils.app_id,
                identity: utils.identity,
            },
            header: {
                'Authorization': utils.getToken()
            },
            success: (res) => {
                uni.hideLoading()
                const resData = JSON.parse(res.data)
                resolve(resData.data.info.url);
            },
        });
    });
};
const selectData = ref({})
onReady(async () => {
    const dpr = uni.getSystemInfoSync().pixelRatio

    const systemInfo = uni.getSystemInfoSync()
    let statusBarHeight = systemInfo.statusBarHeight
    let screenWidth = systemInfo.screenWidth
    let menuButtonInfo = 0
    // #ifdef MP
    menuButtonInfo = wx.getMenuButtonBoundingClientRect();
    // #endif
    let navHeight = (menuButtonInfo.top - statusBarHeight) * 2 + menuButtonInfo.height
    let navBarHeight = Number(navHeight + statusBarHeight);//导航总高
    console.log('screenWidth', screenWidth, systemInfo, menuButtonInfo)
    selectData.value = {
        headHeight: navHeight,
        screenWidth: screenWidth,
        statusBarHeight: statusBarHeight,
        navBarHeight: navBarHeight,//导航总高
        navBarContentTop: navHeight + statusBarHeight,//导航文插槽距离顶部距离
        navBarHeightTitle: navHeight,//导航文字模块总高
        capsuleSpace: systemInfo.screenWidth - menuButtonInfo.right + 6,
        menuButtonWidth: menuButtonInfo.width,
        menuButtonRight: (screenWidth - menuButtonInfo.right) + menuButtonInfo.width,
    }
})
</script>
<style lang="scss" scoped>
.head {
    height: 290rpx;
    background: linear-gradient(180deg, #DBF046 0%, #FFFFFF 100%);
    border-radius: 0rpx 0rpx 0rpx 0rpx;

    .back_box {
        position: relative;

        .bg {
            height: 290rpx;
            position: absolute;
            top: 0;
            left: 0;
            background: linear-gradient(180deg, #DBF046 0%, #FFFFFF 100%);

        }

        .back {
            position: fixed;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            overflow: hidden;

            .text {
                width: 366rpx;
                text-align: center;

            }
        }
    }

    .icon {
        width: 28rpx;
        height: 48rpx;
        margin-left: 30rpx;
        margin-right: auto;
    }
}

.content_box {
    position: absolute;
    box-sizing: border-box;

    .bg_title {
        width: 376rpx;
        height: 164rpx;
        background: linear-gradient(89deg, #DBF046 0%, #BFFFBB 100%);
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        position: relative;

        .titles {
            height: 84rpx;
            line-height: 84rpx;
            text-align: center;
        }
    }

    .edit_box {
        width: 100%;
        // height: 850rpx;
        border-radius: 40rpx;
        position: absolute;
        top: 84rpx;
        left: 0;
        box-sizing: border-box;
        background-color: #fff;

        .msg_box {
            min-height: 850rpx;
            background: #F8F8F8;
            border-radius: 40rpx;

            .textarea_box {
                background-color: #fff;
                border-radius: 20rpx;
                padding: 20rpx 0 0 20rpx;
                height: 500rpx;
                box-sizing: border-box;

                .textarea {
                    height: calc(500rpx - 72rpx);
                }

                .textarea_bottom {
                    height: 72rpx;
                    line-height: 72rpx;
                    text-align: right;
                    padding-right: 20rpx;
                }
            }
        }

        .phone_box {
            height: 78rpx;
            background: #F8F8F8;
            // background-color: red;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            margin-top: 20rpx;

            .label {
                width: 124rpx;
                padding-left: 20rpx;
                margin-right: 20rpx;

            }
        }
    }

    .img_model {
        background-color: #fff;
        min-height: 230rpx;
        box-sizing: border-box;

        .imgBox {
            display: flex;
            align-items: flex-end;
            box-sizing: border-box;

            .img_list {
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                gap: 18rpx;

                .imgItem {
                    // margin-right: auto;

                    .imgs {
                        width: 106rpx;
                        height: 136rpx;
                    }

                    width: 106rpx;
                    height: 136rpx;
                    position: relative;

                    .icons {
                        position: absolute;
                        right: 5rpx;
                        top: 5rpx;
                    }
                }

                .videoItem {
                    width: 400rpx;
                    height: 300rpx;
                    box-sizing: border-box;
                    margin: auto;
                    position: relative;

                    .preview-video {
                        width: 400rpx;
                        height: 250rpx;
                    }

                    .icons {
                        width: 35rpx;
                        height: 35rpx;
                        position: absolute;
                        right: 0;
                        top: 0;
                        z-index: 9999;
                    }
                }

                :deep(.u-upload) {
                    flex: 0 !important;
                    margin-left: auto;
                }
            }

            .imgUpload {
                width: 106rpx;
                height: 136rpx;
                border-radius: 20rpx;
                border: 2rpx dashed #333;
                margin-left: auto;


            }


        }


    }
}

.btn_box {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    box-sizing: border-box;
    background-color: #F8F8F8;
    padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

    .icons {
        width: 28rpx;
        height: 28rpx;
    }

    .center {
        width: 100%;
        text-align: center;
    }

    .btn_left {
        width: 132rpx;
        height: 54rpx;
        background: #FFFFFF;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        line-height: 54rpx;
        text-align: center;
    }

    .btn {
        width: 100%;
        height: 78rpx;
        // background: #F1F1F1;
        border-radius: 20rpx 20rpx 20rpx 20rpx;
        text-align: center;
        line-height: 78rpx;
        font-size: 28rpx;

    }

    .box {
        padding: 20rpx 30rpx 0;
        box-sizing: border-box;
        height: 98rpx;


        .add {
            width: 100%;
            color: #DBF046;
            background-color: #333333;
        }

    }
}

.delete_box {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9999;


    .bg {
        position: absolute;
        height: 100%;
        width: 100%;
        background-color: #000;
        opacity: 0.5;
        top: 0;
        left: 0;
    }

    .delete_model {
        position: absolute;
        background-color: #fff;
        text-align: center;
        width: 518rpx;
        // height: 386rpx;
        top: calc(50% - (386rpx / 2));
        left: calc(50% - (518rpx / 2));

        .text {
            // padding: 20rpx;
            min-height: 140rpx;
        }

        .btn_model {
            margin-bottom: 30rpx;

            .btn {
                width: 184rpx;
                height: 80rpx;
                line-height: 80rpx;
                border-radius: 20rpx;
                font-size: 28rpx;
                color: #333;
                background-color: #F8F8F8;
            }

            .sunbmit {
                background-color: #333;
                color: #DBF046;
            }
        }
    }

}
</style>